<template>
	<view class="content">
		
		<view class="main">
			<view class="maintop">
				<view class="title">
					<text>意见反馈</text>
				</view>
				<view class="txt">
					<textarea
              v-model="suggestion"
              maxlength="300"
						placeholder="请描述您的需求内容或意见反馈~"
						placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #646566;
						}"
						style="background: #FFFFFF; width: 100%;">
					</textarea>
				</view>
				<view class="num">
					<text>{{valueLen}}/300</text>
				</view>
			</view>
			<view class="mainBottom">
				<view class="photoTitle">
					<text>反馈内容</text>
					<text class="light">(上限3张图片）</text>
				</view>
				<view class="photo">
					<view class="addSelected">
            <upload ref="uUpload" @chooseImg="afterReadImgs" @removeImg="deleteImgs"
                       :uploadValue="{fileList:imgList1,count:3,custom:true
      }"
            >
              <image src="/static/publishActive/add1.png" mode=""></image>
            </upload>
					</view>

				</view>
			</view>
      <u-button :custom-style="{
        width:'678rpx',
        height: '80rpx',
        background: '#4FB5B6',
        borderRadius:'10rpx',
        fontSize: '36rpx',
        fontFamily: 'PingFang SC',
        fontWeight: 500,
        color: '#FFFFFF',
        marginTop:'43rpx',
        marginBottom: '48rpx;'

    }" hover-class="none" @click="onSubmit">提交</u-button>
		</view>
		<Tabbar :current="3"></Tabbar>
	</view>
</template>
<script>
import NavTitle from "../../components/NavTitle/NavTitle.vue"
import publishContentMixins from '@/mixins/publish-content-mixins'
import { addEmFeedback } from '@/api/emFeedback'
import { imageSubstr } from '@/utils/tools'
export default {
  mixins:[publishContentMixins],
	components: {
		NavTitle
	},
	data() {
		return {
		}
	},
	onLoad() {

	},
	methods: {
		//跳转列表对应页面
		nextPage(url) {
			uni.navigateTo({
				url: url,
				fail() {
					uni.switchTab({
						url: url,
						fail() {
							uni.showToast({
								title: '暂未开通，敬请期待！',
								icon: 'none'
							});
						}
					});
				}
			});
		},
    async onSubmit(){
      if(!this.suggestion.length||!this.suggestion.trim()){
        this.$showToast('请输入反馈内容')
        return false
      }
      if(this.suggestion.length<10){
        this.$showToast('请输入大于等于10个字符的反馈内容')
        return false
      }
      await this.onUploadChange(this.imgList1)
      setTimeout(()=>{
        this.imgList2000()
      },800)
    },
    imgList2000(){
      const imageUrl = imageSubstr(this.imageList2)
      this.$showLoading('意见反馈中...')
      addEmFeedback({suggestion:this.suggestion,imageUrl}).then(res=>{
        const {code,message} = res
        this.$hideLoading()
        if(code===200){
          this.$showToast('提交完成')
          this.suggestion = ''
          this.onImgClear()
        } else {
          this.$showToast(message)
        }
      }).catch(err=>{
        this.$hideLoading()
        this.$showToast(err.message)
      })
    }
	}
}
</script>

<style lang="scss" scoped>
.content{
	.main{
		padding-top: 30rpx;
		height: 100vh;
		background: #F0F3F5;
		.maintop{
			margin: 0 30rpx;
			padding: 20rpx 38rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.title{
				margin: 10rpx 0;
				text{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #323233;
				}
			}
			.txt{
				textarea{
					height: 200rpx;
				}
			}
			.num{
				text-align: right;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #969799;
				}
			}
		}
		.mainBottom{
			margin: 20rpx 30rpx 0 30rpx;
			padding: 20rpx 38rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.photoTitle{
				margin: 10rpx 0;
				text{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #323233;
				}
				.light{
					margin-left: 16rpx;
					font-size: 24rpx;
					color: #646566;
				}
			}
			.photo{
				margin-top: 90rpx;
				display: flex;
				.addSelected{
					position: relative;
					.no{
						position: absolute;
						top: -12rpx;
						right: -12rpx;
						width: 34rpx;
						height: 34rpx;
					}
				}
				image{
					margin-right: 10rpx;
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>

